<template>
  <div class="gua" v-if="code">
    <div class="gua1" :style="{ width: diameter + 'px' }" v-if="code.length < 3">
      <div v-for="(x, y) in code.split('')" :key="y">
        <div class="yang" v-if="x == 9"></div>
        <div class="yin" v-else>
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
    <div class="gua2" :style="{ width: diameter + 'px', height: getHeight + 'px' }" v-else>
      <div v-for="(x, y) in code.split('')" :key="y">
        <div class="yang" v-if="x == 9"></div>
        <div class="yin" v-else>
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
  diameter: {
    type: String,
    defalut: []
  },
  code: {
    type: String,
    defalut: []
  }
})

const getHeight = computed(() => {
  let num = 0
  if (props.code.length == 1) {
    num = props.diameter * 0.8
  } else if (props.code.length == 2) {
    num = props.diameter * 0.9
  } else if (props.code.length == 3) {
    num = props.diameter
  } else if (props.code.length == 6) {
    num = props.diameter
  }
  return num
})
</script>
<style scoped lang="scss">
.gua{
  display: flex;
  justify-content: center;
}
.gua1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  >div {
    width: 100%;
    margin-bottom: 10px;

    .yang {
      width: 100%;
      height: 30px;
      background-color: red;
    }

    .yin {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;

      >p {
        width: 45%;
        height: 100%;
        background-color: black;
      }
    }
  }
}

.gua2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  >div {
    width: 100%;
    height: 33%;

    .yang {
      width: 100%;
      height: 60%;
      background-color: red;
    }

    .yin {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: space-between;

      >p {
        width: 45%;
        height: 100%;
        background-color: black;
      }
    }
  }
}
</style>
